<template>
	<div id="scBox">
		<div class="LoginSuccess_box_header">
            <router-link to="/LoginSuccess" class="backsc"><img src="static/imgs/arrowleft.png" alt="" width="100%"></router-link>
            <p class="LoginSuccess_box_header_span">我的收藏</p>
        </div>
		<ul>
			<li v-for="x in scArr" v-if="x.sc==true">
				<span class="Collectionx" :class="{'CollectionRed':x.sc}" @click="x.sc = false">取消收藏</span>
				<a :href="x.share_url">
					<div class="cjmL">
           					<img :src="x.image"/>
           					<span class="cjico"></span>
					</div>
					<div class="cjmR">
						<p class="cjmR1">{{x.dishes_name}}</p>
						<p class="cjmR2">{{x.dishes_desc}}</p>
						<p class="cjmR3"><span v-for="n in x.tags_info">{{n.text}}</span></p>
					</div>
				</a>
			</li>
		</ul>
		<keep-alive>
			<router-view></router-view>
		</keep-alive>
		
	</div>
</template>
	
<script>
	export default{
		computed:{
			scArr(){
					return this.$store.state.xiawuArr
			}
		},
		mounted(){
			this.$nextTick(function(){
				this.$store.commit("getXWCData")
			})
		},
	}
</script>
	
<style>
	#scBox{
		width: 100%;
		height: 100vh;
		
	}
	.backsc{
		display: inline-block;
		width: 0.3rem;
		height: 0.3rem;
		margin-left: 0.2rem;
		text-align: center;
	}
	 .LoginSuccess_box_header{
        height: .85rem;
        line-height: 0.85rem;
        width: 100%;
        background: #fff;
    }
    .LoginSuccess_box_header_span{
        display: inline-block;
        font-size: .32rem;
        width: 80%;
        text-align: center;
    }
    #scBox ul{
    	width: 100%;
    }
    #scBox ul li a{
    	width: 100%;
    	display: flex;
    	margin-bottom: 0.1rem;
    }
    .cjmL{
		width: 40%;
		height: 2rem;
		position: relative;
	}
	.cjmL img{
		width: 100%;
		height: 100%;
	}
	.cjico{
		display: block;
		width: 0.5rem;
		height: 0.5rem;
		background: url("http://pub.szzhangchu.com/web/v4.2/images/ico/ico-play.png") no-repeat;
		background-size: 100% 100%;
		position: absolute;
		top: 30%;
		margin-left: 1rem;
	}
	.cjmR{
		margin-left: 0.15rem;
		width: 60%;
		overflow: hidden;
	}
	.cjmR2{
		height: 0.61rem;
		overflow: hidden;
		margin-top: 0.03rem;
		font-size: 0.23rem;
		color: #a3a3a3;
	}
	.cjmR3{
		margin-top: 0.1rem;
	}
	.cjmR3 span{
		    text-align: center;
		    color: #ff8f5c;
		    font-size: 0.23rem;
		    display: inline-block;
		    border-radius: 0.3rem;
		    border: 1px solid #ff8f5c;
		    padding: 0.01rem 0.15rem;
		    margin-right: 0.1rem;
		    margin-bottom: 0.1rem;
	}
	#scBox ul>li{
		position: relative;
	}
	.Collectionx{
		position: absolute;
		bottom: 0.1rem;
		right: 0.1rem;
		padding: 0 0.05rem;
		border-radius: 0.1rem;
	}
</style>